<template>
  <div>
    <div class="nine-header">
      <van-tabs type="card" @click="onClick" v-model:active="active">
        <van-tab v-for="item in tabs" :key="item.id" :title="item.title">
          <van-grid :border="false" :column-num="2">
            <van-grid-item
              v-for="item in nineList"
              :key="item.id"
              :gutter="10"
              :to="{
                name: 'nineMail',
                params: {
                  cid: item.id,
                  goodid: item.goodsid,
                },
              }"
            >
              <img :src="item.pic" class="nine-product-img" />
              <div class="nine-title">
                <p class="nine-title1">{{ item.title }}</p>
                <p class="nine-youhui">
                  劵后 <span class="nine-jiage">￥{{ item.jiage }}</span>
                </p>
                <p class="nine-discount1">
                  {{ item.special }}
                  <span class="nine-discount">券{{ item.quanJine }}元</span>
                </p>
                <p class="nine-yishou">已售{{ item.xiaoliang }}</p>
              </div>
            </van-grid-item>
          </van-grid>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script lang="ts">
import {
  computed,
  defineComponent,
  onMounted,
  ref,
  reactive,
  toRefs,
} from "vue";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    const active = ref(0);
    const store = useStore();
    const nineList = computed(() => store.state.ninelist.list);
    const tabList = reactive({
      tabs: [
        {
          id: 0,
          title: "全部",
          cid: "22704",
          pageNo: "1",
          pageSize: "10",
        },
        {
          id: 1,
          title: "春季新装",
          cid: "23266",
          pageNo: "1",
          pageSize: "10",
        },
        {
          id: 2,
          title: "纸品居家",
          cid: "22705",
          pageNo: "1",
          pageSize: "10",
        },
        {
          id: 3,
          title: "厨具收纳",
          cid: "22706",
          pageNo: "1",
          pageSize: "10",
        },
        {
          id: 4,
          title: "美妆护肤",
          cid: "22709",
          pageNo: "1",
          pageSize: "10",
        },
        {
          id: 5,
          title: "辛辣鲜麻",
          cid: "22710",
          pageNo: 1,
          pageSize: 10,
        },
        {
          id: 6,
          title: "饼干甜品",
          cid: "22708",
          pageNo: 1,
          pageSize: 10,
        },
        {
          id: 7,
          title: "内饰服装",
          cid: "22707",
          pageNo: 1,
          pageSize: 10,
        },
        {
          id: 8,
          title: "五金电器",
          cid: "22711",
          pageNo: 1,
          pageSize: 10,
        },
      ],
    });

    onMounted(() => {
      store.dispatch({
        type: "ninelist/getNineList",
        params: {
          cid: "23",
          pageNo: "1",
          pageSize: "10",
        },
      });
    });
    const onClick = (name: number): void => {
      tabList.tabs.filter((item) => {
        if (item.id == name) {
          store.dispatch({
            type: "ninelist/getNineList",
            params: {
              cid: item.cid,
              pageNo: item.pageNo,
              pageSize: item.pageSize,
            },
          });
        }
      });
    };
    return {
      active,
      nineList,
      ...toRefs(tabList),
      onClick,
    };
  },
});
</script>
<style scoped>
.nine-youhui {
  font-size: 0.12rem;
}
.nine-title1 {
  font-size: 0.12rem;
  width: 1.6rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 0.1rem;
  overflow: hidden;
}
.nine-jiage {
  color: rgb(255, 128, 48);
  font-size: 0.2rem;
}
.nine-title {
  font-size: 0.12rem;
  width: 1.6rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 0.1rem;
}
.nine-product-img {
  width: 100%;
}
/deep/ .van-tab {
  border-radius: 0.1rem;
  background: white;
  color: rgb(255, 128, 48);
  margin-left: 0.1rem;
}
.nine-discount {
  padding: 0 0.08rem;
  border: 1px red solid;
  background: red;
  color: white;
}
.nine-header {
  background: rgb(255, 128, 48);
  padding-bottom: 0.1rem;
}
/deep/.van-tabs__nav--card {
  background: rgb(255, 128, 48);
  border: none;
}
/deep/.van-tabs--card > .van-tabs__wrap {
  height: 40px;
}
</style>
